<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <el-input v-model="query.keyword" placeholder="详细地址" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="func_handleSearch" plain>搜索</el-button>
            </div>
			<el-table :data="couponsTableData" row-key="id" border  header-cell-class-name="table-header" class="table" @row-click="func_trClick">
                <el-table-column prop="id" label="ID" width="55" align="center" v-if="false" />
				<el-table-column label="序号" width="80" align="center"><template #default="scope">
						{{scope.$index + 1}}
				</template></el-table-column>
                <el-table-column prop="couponName" label="券名称" />
				<el-table-column prop="strCouponAmount" label="优惠金额" />
                <el-table-column prop="strCouponType" label="券分类" />
                <el-table-column prop="strUseType" label="使用类型" />
                <el-table-column prop="specialType" label="特定类型" v-if="false"/>
                <el-table-column prop="lengthDays" label="有效时间(天)" />
                <el-table-column prop="strStartTime" label="开始时间" />
                <el-table-column prop="strExpTime" label="到期时间" />
			</el-table>
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="query.pageNum"
					:page-size="query.pageSize" :total="dataTotal" @current-change="func_handlePageChange"></el-pagination>
			</div>
        </div>
    </div>
</template>
<script>
import { onMounted, ref, reactive, toRefs, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { findProductInfoListPage, } from "../api/hairmanager/products";
import { findCouponListPage, } from "../api/hairmanager/coupon";
import { allocationCoupon } from "../api/hairmanager/memberCoupon";

import { NO_DATA_SELECT_ERROR, SUCCESS_ADDDATA_DIALOG_MESSAGE, SUCCESS_DELDATA_DIALOG_MESSAGE, SUCCESS_EDITDATA_DIALOG_MESSAGE, formLabelWidth, } from "../api/CommonErrorMessage.js";

export default {
    name: "couponsSelector",
    components: {},
	props:{
		selectValue: Object
	},
	emits: ['ProductData'],
    setup(props, cex){
		onMounted(() => {
		});
        const router = useRouter();
		const route = useRoute();
        const formLabelWidth = ref('170px');
        const loadFlg = ref(false);
        let query = reactive({
            statusFlg: 2001,
            keyword: '',
            pageNum: 1,
            pageSize: 10,
        });
        const couponsTableData = ref([]);
        const dataTotal = ref(0);
        let memberId = 0;
		// =========================================================================================
        // 获取主表格数据
        const func_getData = () => {
            couponsTableData.value = [];
            findCouponListPage(query).then((res)=>{
                couponsTableData.value = res.data.list;
                dataTotal.value = res.data.total;
            });
        };
        /**
         * @name 条件查询操作
         */
        const func_handleSearch = () => {
            query.pageNum = 1;
            func_getData();
        };
        /**
         * @name 主表格分页查询
         */
        const func_handlePageChange = (val) => {
            query.pageNum = val;
            func_getData();
        };
		const func_trClick = (row, event, column) => {
            let data = {memberId: memberId, couponIds: [row['id']] };
            //绑定会员优惠券
            allocationCoupon(data).then((res) => {
                    if(res.code != 200) {
                        if(res.type == 0) {
                            ElMessage.warning(res.message);
                        } else {
                            ElMessage.error(res.message);
                        }
                    } else {
                        ElMessage.success(SUCCESS_DELDATA_DIALOG_MESSAGE);
                        cex.emit('CouponData',  {state: 1,  id: row.id, product:row.productName, points:row.points, price:row.price,});
                    }
            });
			
		};
        // 扩展业务处理 ========================================================================================= START
        // 扩展业务处理 ========================================================================================= END
        // =========================================================================================================
        // 业务数据监听
        watch(() => props.selectValue, (val) => {
            memberId = val['memberId'];
            val['load'];
            func_getData()
        },{deep: true, immediate: true});
        return {
            query, couponsTableData, dataTotal, 
            func_getData, func_handleSearch, func_handlePageChange, func_trClick,
        };
    },
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 300px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.green {
    color: #67c23a;
}
.blue {
    color: #1684FC;
}
.mr10 {
    margin-right: 10px;
}
</style>